<style>
.pageItem {
	clear: both;
	width: 100%;
}
</style>
<h3 class="titleBlock">Pages Setting</h3>
<input type="button" value="Add Page" class="btnAddItem" onclick="addItem('pageItem', 'pageIndexers')"/>
<div class="contentBlock autoHeight" id="pageIndexers">
	<div class="pageItem hide">
		<table class="fieldSet fullWidth">
			<tr>
				<th style="width:80px">Number</th>
				<td style="width:40px"><input type="text" name="chapter[pages][0][number]" style="width:40px"/></td>
				<th style="width:80px">Image Url</th>
				<td><input type="text" name="chapter[pages][0][image]" style="width:200px"/></td>
				<th style="width:80px">Alt Text</th>
				<td><input type="text" name="chapter[pages][0][text]" style="width:200px"/></td>
				<th style="width:80px">
					<input type="button" value="Delete" class="btnDeleteItem" onclick="deleteItem(this)"/>
					<input type="button" value="Save" class="btnSaveItem" onclick="saveItem(this)"/>
				</th>
			</tr>
		</table>
		<!--
		<table class="gridview" id="gridview">
			<thead>
			<tr class="columns">
				<th><span></span></th>
				<th class="columnFilter"><span>Number</span></th>
				<th class="columnFilter"><span>Url</span></th>
				<th class="columnFilter"><span>Text</span></th>
				<th><span>Action</span></th>
			</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="text" name="chapter[pages][0][number]" style="width:40px"/></td>
					<td><input type="text" name="chapter[pages][0][image]" style="width:200px"/></td>
					<td><input type="text" name="chapter[pages][0][text]" style="width:200px"/></td>
					<td>Delete</td>
				</tr>
			</tbody>
		</table>
		-->
	</div>
	<?php foreach ($pages as $page) :?>
	<div class="pageItem">
		<table class="fieldSet fullWidth">
			<tr>
				<th style="width:80px">Number</th>
				<td style="width:40px"><input type="text" name="chapter[pages][<?php echo $page['number']?>][number]" style="width:40px" value="<?php echo $page['number']?>"/></td>
				<th style="width:80px">Image Url</th>
				<td><input type="text" name="chapter[pages][<?php echo $page['number']?>][image]" style="width:200px" value="<?php echo $page['image']?>"/></td>
				<th style="width:80px">Alt Text</th>
				<td><input type="text" name="chapter[pages][<?php echo $page['number']?>][text]" style="width:200px" value="<?php echo $page['text']?>"/></td>
				<th style="width:80px">
					<input type="button" value="Delete" class="btnDeleteItem" onclick="deleteItem(this)"/>
				</th>
			</tr>
		</table>
	</div>
	<?php endforeach; ?>
</div>
<script language="javascript" type="text/javascript">
	function deleteItem(object)
	{
		jQuery(object).parent().parent().parent().parent().remove();
	}
	function addItem(itemClass, containerId)
	{
		// Get Item
		//var item = jQuery("." + itemClass).first();
		var html = "<div class='"+itemClass+"'>";
		var autoId = new Date().getTime();
		html += '<table class="fieldSet fullWidth">';
		html += '<th style="width:80px">Number</th>';
		html += '<td style="width:40px"><input type="text" name="chapter[pages]['+autoId+'][number]" style="width:40px"/></td>';
		html += '<th style="width:80px">Image Url</th>';
		html += '<td><input type="text" name="chapter[pages]['+autoId+'][image]" style="width:200px"/></td>';
		html += '<th style="width:80px">Alt Text</th>';
		html += '<td><input type="text" name="chapter[pages]['+autoId+'][text]" style="width:200px"/></td>';
		html += '<th style="width:80px"><input type="button" value="Delete" class="btnDeleteItem" onclick="deleteItem(this)"/></th>';
		html += '<tr>';
		html += '</tr>';
		html += '</table>';
		html += '</div>';
		var container = jQuery("#" + containerId);
		container.append(html);
	}
	function saveItem(object)
	{
		
	}
</script>